<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Table 表格2</title>
	<link rel="stylesheet" href="../../static/css/element2.css">
	<script src="../../static/js/vue.global.prod.js"></script>
	<script src="../../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-affix :offset="10"><div id="a_link"></div></el-affix><script src="table.js"></script>
	<el-divider content-position="left">固定表头</el-divider><!-- =============================================================== -->
	<p class="desc">纵向内容过多时，可选择固定表头。只要在 el-table 元素中定义了 height(max-height) 属性，即可实现固定表头的表格，而不需要额外的代码。</p>
	<el-table :data="tableData" style="width: 100%" max-height="150">
		<el-table-column prop="date" label="Date" width="180"></el-table-column>
		<el-table-column prop="name" label="Name" width="180"></el-table-column>
		<el-table-column prop="address" label="Address"></el-table-column>
	</el-table>
	
	<el-divider content-position="left">固定列</el-divider><!-- =============================================================== -->
	<p class="desc">横向内容过多时，可选择固定列。固定列需要使用 fixed 属性，它接受 Boolean 值 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。</p>
	<el-table :data="tableData" style="width: 800px">
		<el-table-column fixed prop="date" label="Date" width="150"></el-table-column>
		<el-table-column prop="name" label="Name" width="120"></el-table-column>
		<el-table-column prop="state" label="State" width="120"></el-table-column>
		<el-table-column prop="city" label="City" width="120"></el-table-column>
		<el-table-column prop="address" label="Address" width="600"></el-table-column>
		<el-table-column prop="zip" label="Zip" width="120"></el-table-column>
		<el-table-column fixed="right" label="Operations" width="120">
			<template #default>
				<el-button type="text" size="small" @click="handleClick">Detail</el-button>
				<el-button type="text" size="small">Edit</el-button>
			</template>
		</el-table-column>
	</el-table>
	
	<el-divider content-position="left">固定列和表头</el-divider><!-- =============================================================== -->
	<p class="desc">横纵内容过多时，可选择固定列和表头。固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。</p>
	<el-table :data="tableData" style="width: 800px" max-height="200">
		<el-table-column fixed prop="date" label="Date" width="150"></el-table-column>
		<el-table-column prop="name" label="Name" width="120"></el-table-column>
		<el-table-column prop="state" label="State" width="120"></el-table-column>
		<el-table-column prop="city" label="City" width="120"></el-table-column>
		<el-table-column prop="address" label="Address" width="600"></el-table-column>
		<el-table-column prop="zip" label="Zip" width="120"></el-table-column>
		<el-table-column fixed="right" label="Operations" width="120">
			<template #default="scope">
				<el-button type="text" size="small" @click="handleClick">Detail</el-button>
				<el-button type="text" size="small">Edit</el-button>
			</template>
		</el-table-column>
	</el-table>
	
	<el-divider content-position="left">流体高度</el-divider><!-- =============================================================== -->
	<p class="desc">当数据量动态变化时，可以为 Table 设置一个最大高度。通过设置 max-height 属性为 Table 指定最大高度。 此时若表格所需的高度大于最大高度，则会显示一个滚动条。</p>
	<el-table :data="tableData" style="width: 800px" max-height="250">
		<el-table-column fixed prop="date" label="Date" width="150"></el-table-column>
		<el-table-column prop="name" label="Name" width="120"></el-table-column>
		<el-table-column prop="state" label="State" width="120"></el-table-column>
		<el-table-column prop="city" label="City" width="120"></el-table-column>
		<el-table-column prop="address" label="Address" width="600"></el-table-column>
		<el-table-column prop="zip" label="Zip" width="120"></el-table-column>
		<el-table-column fixed="right" label="Operations" width="120">
			<template #default="scope">
				<el-button type="text" size="small" @click.prevent="deleteRow(scope.$index, tableData)">Remove</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-button class="mt-4" style="width: 800px" @click="onAddItem">Add Item</el-button>
	
	<el-divider content-position="left">多级表头</el-divider><!-- =============================================================== -->
	<p class="desc">数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。</p>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column prop="date" label="日期" width="150"></el-table-column>
		<el-table-column label="个人名片">
			<el-table-column prop="name" label="姓名" width="120"></el-table-column>
			<el-table-column label="地址信息">
				<el-table-column prop="state" label="州" width="120"></el-table-column>
				<el-table-column prop="city" label="市" width="120"></el-table-column>
				<el-table-column prop="address" label="地址"></el-table-column>
				<el-table-column prop="zip" label="邮政编码" width="120"></el-table-column>
			</el-table-column>
		</el-table-column>
	</el-table>
	
	<el-divider content-position="left">展开行</el-divider><!-- =============================================================== -->
	<p class="desc">当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。</p>
	<p class="desc">通过设置 type="expand" 和 slot 可以开启展开行功能， el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 slot 相同。</p>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column type="expand">
			<template #default="props">
				<p>State: {{ props.row.state }}</p>
				<p>City: {{ props.row.city }}</p>
				<p>Address: {{ props.row.address }}</p>
				<p>Zip: {{ props.row.zip }}</p>
			</template>
		</el-table-column>
		<el-table-column label="Date" prop="date"></el-table-column>
		<el-table-column label="Name" prop="name"></el-table-column>
	</el-table>
	
	<el-divider content-position="left">自定义索引</el-divider><!-- =============================================================== -->
	<p class="desc">自定义 type=index 列的行号。</p>
	<p class="desc">通过给 type=index 的列传入 index 属性，可以自定义索引。 该属性传入数字时，将作为索引的起始值。 也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。</p>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column type="index" :index="indexMethod" label="索引" width="100"></el-table-column>
		<el-table-column prop="date" label="Date" width="180"></el-table-column>
		<el-table-column prop="name" label="Name" width="180"></el-table-column>
		<el-table-column prop="address" label="Address"></el-table-column>
	</el-table>
	
</div>
</body>
<script>

const Main = {
	data() {
		return {
			value: '',
			fileIndex: 2,
			tableData: [
				{
					date: '2016-05-03',
					name: 'Tom',
					state: '加利福尼亚州',
					city: '洛杉矶',
					address: 'No. 189, 某某路, 洛杉矶',
					zip: 'CA 90036',
					tag: 'Home',
				},
				{
					date: '2016-05-02',
					name: 'Tom',
					state: '加利福尼亚州',
					city: '洛杉矶',
					address: 'No. 189, 某某路, 洛杉矶',
					zip: 'CA 90036',
					tag: 'Office',
				},
				{
					date: '2016-05-04',
					name: 'Tom',
					state: '加利福尼亚州',
					city: '洛杉矶',
					address: 'No. 189, 某某路, 洛杉矶',
					zip: 'CA 90036',
					tag: 'Home',
				},
				{
					date: '2016-05-01',
					name: 'Tom',
					state: '加利福尼亚州',
					city: '洛杉矶',
					address: 'No. 189, 某某路, 洛杉矶',
					zip: 'CA 90036',
					tag: 'Office',
				},
			],
			msg:"msg test"
		}
	},
	computed:{
		btn(){
			return function(i){
				if(this.$data.fileIndex == i){
					return "layui-btn";
				}else{
					return "layui-btn0";
				}
			}
		}
	},
	methods:{
		handleClick() {
			console.log('click')
		},
		deleteRow(index, rows) {
			rows.splice(index, 1)
		},
		onAddItem(){
			// console.log(this.$data.msg);
			this.$data.tableData.push({
				date: new Date(),
				name: 'Tom',
				state: 'California',
				city: 'Los Angeles',
				address: 'No. 189, Grove St, Los Angeles',
				zip: 'CA 90036',
				tag: 'Office',
			})
		},
		indexMethod(index) {
			// return index * 2;
			return (index + 1) * 100;
		},
	},
}
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");
// console.log(ElementPlus)
</script>
</html>
